<template>
	<view class="page">
		<wd-navbar fixed placeholder left-arrow safeAreaInsetTop custom-class="nav" :bordered="false" @click-left="handleClickLeft">
			<template #title>
			    <view class="nav_title">
			      <view class="check_wrap">
					  <view :class="['check_item', state.mode === ENUM.GENDER && 'active']" @click="handleChageMode(ENUM.GENDER)">性别年龄</view>
					  <view :class="['check_item', state.mode === ENUM.HOBBIES && 'active']" @click="handleChageMode(ENUM.HOBBIES)">兴趣分类</view>
				  </view>
			    </view>
			  </template>
		</wd-navbar>
		<view class="content_box">
			<template v-if="state.mode === ENUM.GENDER">
				<view class="d-flex-center">
					<wd-text
					  text="选择性别、年龄、定制专属首页"
					  size="16px"
					  bold
					  color="#111111"
					  ></wd-text>
				</view>
				<wd-gap height="20rpx"></wd-gap>
				<view class="d-flex-center">
					<wd-text
					  text="*我们将根据您的选择,推荐给您适合的优质视频"
					  size="12px"
					  color="#7A7A7A"
					  ></wd-text>
				</view>
				<wd-gap height="80rpx"></wd-gap>
				<view class="card">
					<wd-text
					  text="您的性别"
					  size="16px"
					  color="#333333"
					  bold
					  ></wd-text>
					  <wd-radio-group custom-class="cus_radio" v-model="state.gender" cell shape="button">
					    <wd-radio value="1">
							<wd-img src="/static/assets/my/boy.png" width="21" height="21"></wd-img>
							<text style="padding: 5px;"></text>
							男士</wd-radio>
					    <wd-radio value="2">
							<wd-img src="/static/assets/my/girl.png" width="21" height="21"></wd-img>
							<text style="padding: 5px;"></text>
							女士</wd-radio>
					  </wd-radio-group>
				</view>
				<wd-gap height="30rpx"></wd-gap>
				<view class="card">
					<wd-text
					  text="您的年龄"
					  size="16px"
					  color="#333333"
					  bold
					  ></wd-text>
					  <wd-radio-group custom-class="cus_radio" v-model="state.age" cell shape="button">
					    <wd-radio value="1">20岁以下</wd-radio>
					    <wd-radio value="2">20-30岁</wd-radio>
						<wd-radio value="3">30-40岁</wd-radio>
						<wd-radio value="4">40岁以上</wd-radio>
					  </wd-radio-group>
				</view>
				<wd-button custom-class="wd_btn" @click="handleClick" block>完成并去看视频</wd-button>
			</template>
			<template v-else>
				<view class="d-flex-center">
					<wd-text
					  text="选择兴趣,定制专属首页"
					  size="16px"
					  bold
					  color="#111111"
					  ></wd-text>
				</view>
				<wd-gap height="20rpx"></wd-gap>
				<view class="d-flex-center">
					<wd-text
					  text="*我们将根据您的选择,推荐给您适合的优质视频"
					  size="12px"
					  color="#7A7A7A"
					  ></wd-text>
				</view>
				<wd-gap height="50rpx"></wd-gap>
				<view class="hobbies_list">
					<view v-for="item in state.hobbiesList" class="hobbies_item" @click="changeSelectList(item.type)">
						<view class="img_wrap">
							<wd-img :src="item.url" width="100" height="100" round></wd-img>
							<wd-img v-if="state.selectList.has(item.type)" custom-class="mask" src="/static/assets/my/select.png" width="22" height="22"></wd-img>
							<wd-img v-else custom-class="mask" src="/static/assets/my/unselect.png" width="22" height="22"></wd-img>
						</view>
						<view>{{decodeURI(item.name)}}</view>
					</view>
				</view>
				<wd-button custom-class="wd_btn" @click="handleClick" block>{{state.selectList.size >= 3 ? '立即推荐' : '至少选择3个兴趣'}}</wd-button>
			</template>
		</view>
	</view>
</template>

<script setup>
import { toRouter } from "@/hooks/utils";
import { reactive, onMounted } from 'vue';
const ENUM = {
	GENDER: "GENDER",
	HOBBIES: "HOBBIES"
}
const state = reactive({
	mode: ENUM.GENDER,
	gender: '1',
	age: '1',
	selectList: new Map(),
	hobbiesList: []
})
const changeSelectList = (key) => {
	if(state.selectList.has(key)){
		state.selectList.delete(key)
	}else{
		state.selectList.set(key, key)
	}
}
const handleClickLeft = function handleClickLeft() {
  uni.navigateBack()
}
const handleChageMode = (mode) => {
	state.mode = mode
}
const handleClick = ()=> {
}
const initHobbiesList = ()=> {
	uni.request({
		url: '/api/wallpaper/oss/list?dictionary=static-wallpaper&category=hobby'
	}).then(res=>{
		state.hobbiesList = res.data
	})
}
onMounted(()=>{
	initHobbiesList()
})
</script>

<style lang="scss" scoped>
:deep() {
	.nav {
		background: rgb(245, 245, 245) url("http://124.223.41.167:8080/mobile/static/images/bg.png") no-repeat top left/100% auto;
	}
	.cus_radio {
		--wot-color-white: none;
		--wot-checkbox-checked-color: #FE4167;
		--wot-radio-button-radius: 8px;
		.is-button {
			width: 50% !important;
			.wd-radio__label {
				--wot-checkbox-button-height: 40px;
				background-color: #fff !important;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
	}
	.wd_btn {
		background: #FE4484;
		margin: 94rpx 100rpx 0;
		--wot-color-theme: #FE4484;
		&.is-disabled {
			--wot-color-theme: #BFBFBF;
			--wot-button-disabled-opacity: 1;
		}
	}
}
.page {
	position: relative;
	&:before {
		content: '';
		position: fixed;
		left: 0;
		top: 0;
		width: 100vw;
		height: 100vh;
		background: #fff url("http://124.223.41.167:8080/mobile/static/images/bg.png") no-repeat top left/100%;
		z-index: -1;
	}
}
.nav_title {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100%;
}
.check_wrap {
	display: flex;
	border-radius: 40rpx;
	overflow: hidden;
	color: #818181;
	background: #fff;
	font-size: 28rpx;
	line-height: 1.4;
	font-weight: normal;
	box-shadow: 0 0 5rpx rgba(0,0,0,.1);
	.check_item {
		padding: 10rpx 30rpx;
		border-radius: 40rpx;
		&.active {
			background: #FE3D64;
			color: #fff;
		}
	}
}
.content_box {
	padding: 40rpx;
}
.card {
	padding: 30rpx;
	background: #F5F5F5;
	border-radius: 12rpx;
}
.hobbies_list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-gap: 15px;
	text-align: center;
	max-height: 50vh;
	overflow: scroll;
	.img_wrap {
		position: relative;
		width: 100px;
		height: 100px;
		:deep() {
			.mask {
				position: absolute;
				right: 6px;
				bottom: 4px;
			}
		}
	}
}
</style>
